<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="./css/elementUI.css" />
    <link rel="stylesheet" href="./css/articleDetails.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <title>文章详情页</title>
  </head>
  <body>
    <div id="articleDetails">
      <div class="article-left">
        <div class="userInfo article-shadow">
          <div class="user">
            <div class="avatar">
              <img :src="articleInfo.userInfo.headPortrait" alt="" />
            </div>
            <div class="info">
              <div class="name">{{articleInfo.userInfo.name}}</div>
              <div class="des">{{articleInfo.userInfo.introduce}}</div>
            </div>
          </div>
          <div class="follow">
            <el-button
              v-if="articleInfo.isFollow"
              @click="userFollow"
              style="width: 100%"
              size="small"
              type="warning"
              >已关注</el-button
            >
            <el-button
              v-else
              @click="userFollow"
              style="width: 100%"
              size="small"
              type="warning"
              >未关注</el-button
            >
          </div>
          <div class="lists">
            <div class="list">
              <div class="icon">
                <i class="iconfont icon-fabiao"></i>
              </div>
              <span>累计发表文章 12 篇</span>
            </div>
            <div class="list">
              <div class="icon">
                <i class="iconfont icon-dianzan"></i>
              </div>
              <span>累计获取点赞 12</span>
            </div>
            <div class="list">
              <div class="icon">
                <i class="iconfont icon-fensi"></i>
              </div>
              <span>累计收获粉丝 12 </span>
            </div>
          </div>
        </div>
        <div class="article-shadow recommend">
          <div class="title">相关文章</div>
          <el-divider></el-divider>
          <div class="article-lists">
            <div
              class="art-info"
              v-for="item in relatedArticles"
              :key="item.id"
            >
              <div class="art-tit">
                <a href="">{{item.title}}</a>
              </div>
              <div class="more">
                {{item.thumbs}} 点赞 · {{item.comments}} 评论
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="article-right">
        <div class="article-info article-shadow">
          <div class="title">{{articleInfo.title}}</div>
          <div class="tag">
            标签：
            <el-tag> {{articleInfo.labelid}} </el-tag>
          </div>
          <div class="userInfo">
            <div class="avatar">
              <img :src="articleInfo.userInfo.headPortrait" alt="" />
            </div>
            <div class="info">
              <div class="name">
                <a :href="'/user/'+articleInfo.userInfo.id" target="_blank"
                  >{{ articleInfo.userInfo.name }}</a
                >
              </div>
              <div class="time">
                {{articleInfo.writeTime}} · 浏览量 {{articleInfo.browse}}
              </div>
            </div>
          </div>
          <div class="content" v-html="articleInfo.text"></div>
        </div>
        <div class="comment article-shadow" id="comment">
          <div class="comment-title">评论 ({{commentList.length}}条)</div>
          <div class="info" v-if="user.id">
            <div class="avatar">
              <img :src="user.headPortrait" alt="" />
            </div>
            <div class="input">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入评论"
                v-model="commentText"
                ref="comment"
              >
              </el-input>
              <div class="submit">
                <el-button type="warning" size="small" @click="submitComment"
                  >发表评论</el-button
                >
              </div>
            </div>
          </div>
          <div class="info no-login" v-else>请先 <a href="/login">登录</a></div>
          <div
            class="comment-list"
            v-for="item in commentList"
            :key="item.acid"
          >
            <div class="avatar">
              <img :src="item.uid.headPortrait" alt="" />
            </div>
            <div class="info">
              <div class="name">
                <div class="x">{{item.uid.name}}</div>
                <div class="time">{{item.time}}</div>
              </div>
              <div class="commons">{{item.commons}}</div>
              <div class="cz">
                <div class="thumb" :class="item.isThumb ?'active':''">
                  <i class="iconfont icon-dianzan"></i> {{item.isThumb ? '已赞':
                  '点赞'}}
                </div>
                <div class="thumb" @click.stop="showReply(item.acid)">
                  <i class="iconfont icon-31pinglun"></i> 回复
                </div>
              </div>
              <div class="reply" v-if="reply === item.acid" @click.stop>
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入回复的内容"
                  v-model="replyText"
                >
                </el-input>
                <div class="submit">
                  <el-button type="warning" size="small" @click="replyFun(item)"
                    >回复</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="fixed">
        <div
          class="item"
          :class="articleInfo.isThumbs ? 'active' : ''"
          @click="thumbsFun"
        >
          <i class="iconfont icon-dianzan"></i>
          <div class="num">{{articleInfo.thumbs}}</div>
        </div>
        <div
          class="item"
          :class="articleInfo.isCollect ? 'active' : ''"
          @click="collectFun"
        >
          <i class="iconfont icon-shoucang"></i>
          <div class="num">{{articleInfo.collect}}</div>
        </div>
        <div class="item" @click="jumpComment">
          <i class="iconfont icon-31pinglun"></i>
          <div class="num">{{commentList.length}}</div>
        </div>
      </div>
    </div>
    <script>
      new Vue({
        el: '#articleDetails',
        data: {
          // 登录的用户信息
          user: {
            id: 1,
            name: '崔亚洲',
            headPortrait: 'https://v2.cn.vuejs.org/images/logo.svg',
          },
          // 文章信息
          articleInfo: {
            labelid: '标签一', // 标签
            isFollow: false, // 是否关注用户
            title:
              '这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题', // 游记标题
            userInfo: {
              // 文章作者信息
              id: '1',
              headPortrait: 'https://v2.cn.vuejs.org/images/logo.svg',
              name: '用户姓名用户姓名用户姓名用户姓名',
              introduce:
                '这是个人介绍，这是个人介绍，这是个人介绍，这是个人介绍，', // 个人介绍
            },
            writeTime: '2023-03-12 12:11:12', // 发布时间
            text: '发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦发表一个带有封面的游记哦', // 内容
            browse: 102, // 浏览量
            thumbs: 12, // 点赞量
            collect: 4, // 收藏量
            isThumbs: true, // 是否点赞
            isCollect: true, // 是否收藏
          },
          // 相关文章
          relatedArticles: [
            {
              id: 1,
              title:
                '文章的标题1文章的标题1文章的标题1文章的标题1文章的标题1文章的标题1文章的标题1文章的标题1',
              thumbs: 12, // 点赞数量
              comments: 4, // 评论数量
            },
            {
              id: 2,
              title: '文章的标题2',
              thumbs: 12, // 点赞数量
              comments: 4, // 评论数量
            },
            {
              id: 3,
              title: '文章的标题3',
              thumbs: 12, // 点赞数量
              comments: 4, // 评论数量
            },
            {
              id: 4,
              title: '文章的标题4',
              thumbs: 12, // 点赞数量
              comments: 4, // 评论数量
            },
            {
              id: 5,
              title: '文章的标题5',
              thumbs: 12, // 点赞数量
              comments: 4, // 评论数量
            },
          ],
          // 评论内容
          commentText: '',
          // 评论列表
          commentList: [
            {
              acid: 1,
              uid: {
                id: 1, // 用户ID
                name: '这是用户名', // 用户名
                headPortrait: 'https://v2.cn.vuejs.org/images/logo.svg', // 头像
              },
              commons: '我是评论内容',
              concern: 12, // 点赞数量,
              isThumb: true, // 是否点赞
              time: '2023-03-12 12:12:23',
            },
            {
              acid: 2,
              uid: {
                id: 2, // 用户ID
                name: '这是用户名二', // 用户名
                headPortrait: 'https://v2.cn.vuejs.org/images/logo.svg', // 头像
              },
              commons:
                '我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容我是评论内容',
              concern: 21, // 点赞数量,
              isThumb: false, // 是否点赞
              time: '2023-04-12 12:12:23',
            },
          ],
          // 当前展开的打开的回复
          reply: '',
          // 回复的内容
          replyText: '',
        },
        methods: {
          // 关注用户
          userFollow: function () {
            alert('关注用户')
          },
          // 点赞
          thumbsFun: function () {
            console.log('点赞')
          },
          // 收藏
          collectFun: function () {
            console.log('收藏')
          },
          // 发表评论
          submitComment: function () {
            console.log('评论内容', this.commentText)
          },
          // 评论回复
          replyFun: function (item) {
            console.log('回复的评论信息', item, '回复的内容', this.replyText)
          },
          // 展示回复框内容
          showReply: function (id) {
            this.reply = id
          },
          // 跳转评论
          jumpComment: function () {
            location.href = '#comment'
            this.$refs.comment.focus()
          },
        },
        mounted() {
          document.onclick = () => {
            this.reply = null
          }
        },
        created() {
          // 请求文章数据
          // 请求评论数据
          // axios.get('').then((res) => {
          // })
        },
      })
    </script>
  </body>
</html>
